// components/BubbleCard.tsx
"use client";

import { Popover } from "antd";
import { ReactNode } from "react";

interface BubbleCardProps {
  position: "top-right" | "bottom-left" | "top-left" | "bottom-right";
  title?: string;
  content: ReactNode;
  trigger?: "hover" | "click";
  offset?: number;
  // 修改 icon 参数类型为 ReactNode
  icon?: ReactNode; // 现在可以接受任何 React 节点，包括 Ant Design 图标
  text?: string;
  bubbleColor?: string;
  textColor?: string;
}

export default function BubbleCard({
  position,
  title,
  content,
  trigger = "hover",
  offset = 0,
  icon = "", // 默认值保持字符串
  text = "",
  bubbleColor = "bg-blue-500",
  textColor = "text-white",
}: BubbleCardProps) {
  // 计算偏移样式
  const getOffsetStyle = () => {
    const baseOffset = 10; // 基础偏移量，距离边缘10px

    if (offset === 0) {
      return {
        [position.includes("right") ? "right" : "left"]: `${baseOffset}px`,
        [position.includes("bottom") ? "bottom" : "top"]: `${baseOffset}px`,
      };
    }

    if (position.includes("bottom")) {
      return {
        [position.includes("right") ? "right" : "left"]: `${baseOffset}px`,
        bottom: `${baseOffset + offset * 70}px`,
      };
    }
    if (position.includes("top")) {
      return {
        [position.includes("right") ? "right" : "left"]: `${baseOffset}px`,
        top: `${baseOffset + offset * 70}px`,
      };
    }

    return {
      [position.includes("right") ? "right" : "left"]: `${baseOffset}px`,
      [position.includes("bottom") ? "bottom" : "top"]: `${baseOffset}px`,
    };
  };

  return (
    <div className="fixed z-50" style={getOffsetStyle()}>
      <Popover
        title={title}
        content={content}
        trigger={trigger}
        placement="left"
      >
        <div
          className={`w-18 h-18 ${bubbleColor} rounded-lg flex flex-col items-center justify-center cursor-pointer shadow-lg hover:opacity-90 transition-all duration-300 p-2`}
        >
          <span className="my-1 text-xl flex items-center justify-center">
            {icon}
          </span>
          <span className={`${textColor} text-sm font-medium`}>{text}</span>
        </div>
      </Popover>
    </div>
  );
}
